<template>
	<view class="index">
		<view class="title">请重新设置密码</view>


		<view class="sjh">
			<view>手机号</view>
			<view>
				<input v-model="phone" @blur="phoneClick" type="text" placeholder="请输入手机号" placeholder-style="color:#999999;" />
				<text v-if="phoneActive">手机号格式错误！</text>
			</view>
		</view>

		<view class="sjh">
			<view>验证码</view>
			<view>
				<input v-model="yzm" @blur="sjyzmClick" type="text" placeholder="请输验证码" placeholder-style="color:#999999;" />
				<text v-if="yzmActive">验证码错误！</text>
				<view @click="yzmClick" class="yzm">{{timeTitle}}</view>
			</view>
		</view>

		<view class="sjh">
			<view>登录密码</view>
			<view>
				<input v-model="mm" @blur="mmClick" :password="!flagyc" placeholder="请设置登录密码" placeholder-style="color:#999999;" />
				<text v-if="mmActive">字母开头，6~18之间！</text>
				<image v-show="!flagyc" @click="flagyc= !flagyc" src="https://z3.ax1x.com/2021/11/11/IwgBWV.png" mode=""></image>
				<image v-show="flagyc" @click="flagyc= !flagyc" src="https://z3.ax1x.com/2021/11/11/IwgJsg.png.png" mode=""></image>
			</view>
		</view>

		<view class="sjh">
			<view>确认密码</view>
			<view>
				<input v-model="qrmm" @blur="qrmmClick" :password="!flagxs" placeholder="请设置登录密码" placeholder-style="color:#999999;" />
				<text v-if="qrmmActive">两次密码不一致！</text>
				<image v-show="flagxs" @click="flagxs = !flagxs" src="https://z3.ax1x.com/2021/11/11/IwgJsg.png" mode=""></image>
				<image v-show="!flagxs" @click="flagxs = !flagxs" src="https://z3.ax1x.com/2021/11/11/IwgBWV.png" mode="">
				</image>
			</view>
		</view>

		<view class="btn" @click="btnClick">
			确定
		</view>

		<view style="width: 100%;height: 1rpx;margin-top: 20rpx;"></view>
	</view>
</template>

<script>
	import { RegularVerification } from '@/common/regular.js'
	export default {
		data() {
			return {
				flagyc: false, // 密码显示是否明文显示
				flagxs: false, // 确认密码显示明文显示
				phone: '', // 手机号
				yzm: '', // 验证码
				mm: '', // 密码
				qrmm: '', // 确认密码
				timeTitle: '获取验证码',
				phoneActive:false,
				yzmActive:false,
				mmActive:false,
				qrmmActive:false,
			}
		},
		methods: {
			// 确认
			btnClick(){
				// 判断表单格式是否正确
				if(!this.phoneActive && !this.yzmActive && !this.mmActive && !this.qrmmActive){
					// 判断表单是否为空
					if(!this.judge()){
						console.log('失败');
						return
					}
					// 不为空成功
					console.log('成功');
					
				}
			},
			// 手机号
			phoneClick(){
				if(this.phone != 0){
					if(!RegularVerification(this.phone,2)){
						this.phoneActive = true
					}else{
						this.phoneActive = false
					}
				}else{
					this.phoneActive = false
				}
			},
			// 验证码
			sjyzmClick(){
				if(this.yzm != 0){
					if(!RegularVerification(this.yzm,4)){
						this.yzmActive = true
					}else{
						this.yzmActive = false
					}
				}else{
					this.yzmActive = false
				}
			},
			// 密码
			mmClick(){
				if(this.mm != 0){
					if(!RegularVerification(this.mm,6)){
						this.mmActive = true
					}else{
						this.mmActive = false
					}
				}else{
					this.mmActive = false
				}
			},
			// 确认密码
			qrmmClick(){
				if(this.qrmm != 0){
					if(this.mm == this.qrmm){
						this.qrmmActive = false
					}else{
						this.qrmmActive = true
					}
				}else{
					this.qrmmActive = true
				}
			},
			// 表单是否为空判断
			judge(){
				// 为空 返回false
				if(!this.phone){
					this.showModal('手机号不能为空！')
					return false
				}else if(!this.yzm){
					this.showModal('验证码不能为空！')
					return false
				}else if(!this.mm){
					this.showModal('密码不能为空！')
					return false
				}else if(!this.qrmm){
					this.showModal('确认密码不能为空！')
					return false
				}
				// 都不为空 返回true
				return true
			},
			// 提示框
			showModal(content) {
				uni.showModal({
					showCancel: false,
					title: '温馨提示',
					content
				})
			},
			// 点击获取验证码
			yzmClick() {
				this.timer(60)
			},
			// 倒计时
			timer(Second) {
				let timeSecond = Second // 倒计时时间秒
				let time = setInterval(res => {
					this.timeTitle = timeSecond--
					if (timeSecond == 0) {
						this.timeTitle = '重新获取验证码',
							clearTimeout(time) // 清除Interval的定时器
					}
				}, 1000)
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		padding: 0 30rpx;

		.title {
			padding-top: 70rpx;
			font-family: PingFangSC-Bold;
			font-size: 40rpx;
			font-weight: 600;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #333333;
		}

		.sjh {
			margin-top: 35rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eeeeee;
			view:nth-child(1) {
				font-family: PingFangSC-Medium;
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #333333;
			}
		
			view:nth-child(2) {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				image {
					width: 42rpx;
					height: 24rpx;
				}
		
				.yzm {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #4d77ff;
				}
			}
			text{
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: red;
			}
			input {
				margin-top: 20rpx;
			}
		}
		
		.btn {
			margin: 40rpx 36rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background-color: #5b96ff;
			border-radius: 6rpx;
			font-family: PingFangSC-Medium;
			font-size: 28rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #ffffff;
		}

	}
</style>
